<template>
    <div class="content">
        <Row :gutter="16">
            <Col :span="8">
            <Row class="box gray h410" >
                <Col :span="24">最新话题</Col>
                <Col :span="24" class="mt10">
                <Input
                    v-model="topic"
                    type="textarea"
                    :autosize="{minRows: 5,maxRows: 5}"
                    placeholder
                />
                </Col>
                <Col :span="24">
                <Button class="mt10" type="primary" @click="publish">发表</Button>
                </Col>
            </Row>
            </Col>
            <Col :span="8" v-for="(item,index) in topicList" :key="index">
            <Row class="box gray">
                <Row class="bzt ftb">{{item.creatorName}}</Row>
                <Row class="bzt">
                    <Col :span="18" class="time">{{item.createTime}}</Col>
                    <Col class="text-r" :span="6">回复:{{item.replyNum}}</Col>
                </Row>
                <Row class="bzt">{{item.topic}}</Row>
                <Row class="bzt">
                    <Col :span="24" class="text-r">
                    <a @click="showTip(index)">查看全部回复</a>
                    </Col>
                </Row>
                <Row class="bzt">
                    <Col :span="18">
                    <Input
                        v-model="item.remark"
                        type="textarea"
                        :autosize="{minRows: 2,maxRows: 5}"
                        placeholder
                    />
                    </Col>
                    <Col class="text-r" :span="6">
                    <Button type="primary" @click="replyOne(item)">回复</Button>
                    </Col>
                </Row>
            </Row>
            </Col>
        </Row>
        <div class="page-footer">
            <Pagination
                :pageSize.sync="params.pageSize"
                :current.sync="params.pageNum"
                :total="params.total"
                @change="getList"
            />
        </div>
        <div v-if="topicVis">
            <Modal class="relay-modal" v-model="topicVis" width="900px" height="800px" @on-ok="ok" @on-cancel="cancel">
                <div class="pd20" >
                    <Row class="mt20">
                        <Row class="box gray">
                            <Row class="bzt ftb">{{topicList[now].creatorName}}</Row>
                            <Row class="bzt">
                                <Col :span="18" class="time">{{topicList[now].createTime}}</Col>
                                <Col class="text-r" :span="6">回复:{{topicList[now].replyNum}}</Col>
                            </Row>
                            <Row class="bzt">{{topicList[now].topic}}</Row>
                        </Row>
                    </Row>

                    <Row class="reply-box" v-for="(item,index) in replyList" :key="index">
                        <Col :span="18">{{item.creatorName}}</Col>
                        <Col :span="6" class="time">{{item.createTime}}</Col>
                        <div class="ws">
                            {{item.replyContent}}
                        </div>
                    </Row>
                    <Pagination
                        :pageSize.sync="replyParams.pageSize"
                        :current.sync="replyParams.pageNum"
                        :total="replyParams.total"
                        @change="getRelay"
                    />
                    <Row class="bzt" >
                        <Col :span="18">
                        <Input v-model="topicList[now].remark" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder=""/>
                        </Col>
                        <Col class="text-r" :span="6"><Button @click="replyOne(topicList[now])">回复</Button></Col>
                    </Row>
                </div>
            </Modal>

        </div>

    </div>
</template>
<script>
import { topicList, replyTopic, seeReply, publishTopic } from '@/api/topic'

export default {
    components: {
    },
    data () {
        return {
            topic: '',
            num: 0,
            now: 0,
            item: {},
            text: '',
            topicList: [],
            replyList: [],
            topicVis: false,
            params: {
                pageNum: 1,
                pageSize: 5,
                total: 0
            },
            replyParams: {
                total: 0,
                pageNum: 1,
                pageSize: 10,
                topic: '',
                topicId: ''
            }
        }
    },
    methods: {
        publish () {
            let param = {
                topic: this.topic
            }
            publishTopic(param).then(res => {
                if (res.data.code != '0000') {
                    this.$Message.error(res.data.data)
                    return
                }
                this.$Message.success('发布成功')
                this.getList()
            })
        },
        ok () {},
        cancel () {},
        showTip (index) {
            this.now = index
            this.replyParams.pageNum = 1
            this.getRelay()
        },
        updateTip () {
            this.getRelay(this.item)
        },
        getRelay () {
            let params = {
                pageNum: this.replyParams.pageNum,
                pageSize: this.replyParams.pageSize,
                topic: '',
                topicId: this.topicList[this.now].topicId
            }
            seeReply(params).then((res) => {
                if (res.data.code != '0000') {
                    this.$Message.error(res.data.data)
                    return
                }

                this.replyList = res.data.data.list
                this.replyParams.total = res.data.data.total
                this.topicVis = true
            })
        },
        getList () {
            let params = {
                pageNum: this.params.pageNum,
                pageSize: this.params.pageSize,
                topic: '',
                topicId: ''
            }
            topicList(params).then((res) => {
                this.params.total = res.data.data.total
                this.topicList = res.data.data.list
            })
        },
        replyOne (row) {
            replyTopic({ topicId: row.topicId, topic: row.remark }).then((res) => {
                if (res.data.code != '0000') {
                    this.$Message.error(res.data.data)
                    return
                }
                this.$Message.success('回复成功')
                this.getList()
                this.getRelay(row)
            })
        }
    },
    mounted () {
        this.getList()
    }
}
</script>
<style scoped>
.box {
  padding: 20px;
  font-size: 14px;
  margin-bottom: 20px;
}
.box.gray {
  background-color: rgba(242, 242, 242, 1);
}
.p10 {
  padding: 10px 10px;
}
.box .w100 {
  width: 100%;
}
.bzt {
  padding: 10px 0px;
}
.ftb {
  font-weight: bold;
}
.mt20{
    margin-top:20px;
}
.reply-box{
    font-size:14px;
    line-height: 30px;
    border-bottom:1px solid #ccc;
}
.time{
    color:#2D8cF0;
}
.reply-box .ws{
    text-indent:25px
}
.pd20{
    padding: 20px 20px;
}
.page-footer{
    margin:20px 0px;
}
.text-r{
    text-align: right;
}
.mt10{
    margin-top:10px;
}
.content-footer{
    margin-top:10px;
}
.h410{
    height:275px;
}
</style>
